<template>
  <div class="_mbbox boxgap nbox1">
    <div class="nbox2">
      <n-h3 style="margin: 0; text-align: center">28天钻石收益：{{ val.int }}</n-h3>
    </div>
    <div>
      <div class="nbox2 bg5">
        <n-h3 style="margin-top: 0">稳定收入类</n-h3>
        <n-space class="nbox2 bg5">
          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['每日签到']"
                size="medium"
                label="每日面板签到"
                @click="ct.cks('每日签到')"
              />
            </template>
            <span>
              (1000 + 2700)<br />
              - 第十天 1000钻石<br />
              - 第二十八天 2700钻石</span
            >
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['签到邮箱']"
                size="medium"
                label="签到邮箱"
                @click="ct.cks('签到邮箱')"
              />
            </template>
            <span>
              ( (500 + 400) x 4周)<br />
              - 周一到周五 100钻 共 500<br />
              - 周六到周日 200钻 共 400</span
            >
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['公会签到']"
                size="medium"
                label="公会签到"
                @click="ct.cks('公会签到')"
              />
            </template>
            <span>
              (150 x 4周)<br />
              - 每周150钻</span
            >
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['每日任务']"
                size="medium"
                label="每日任务"
                @click="ct.cks('每日任务')"
              />
            </template>
            <span>
              (120 x 28天)<br />
              - 每天120钻（韩服新版）</span
            >
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['忒提斯']"
                size="medium"
                label="忒提斯"
                @click="ct.cks('忒提斯')"
              />
            </template>
            <span> - 每期1500钻，持续1个半月所以/1.5</span>
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['团队远征']"
                size="medium"
                label="团队远征"
                @click="ct.cks('团队远征')"
              />
            </template>
            <span> - 每天180钻 共5040钻</span>
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['首领连战']"
                size="medium"
                label="首领连战"
                @click="ct.cks('首领连战')"
              />
            </template>
            <span> - 每期800钻 每28天两期 </span>
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['除草公主']"
                size="medium"
                label="公主礼物"
                @click="ct.cks('除草公主')"
              />
            </template>
            <span> - 公主礼物 ~ 50钻每天？ </span>
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['史莱姆']"
                size="medium"
                label="地牢史莱姆"
                @click="ct.cks('史莱姆')"
              />
            </template>
            <span> - 史莱姆400钻一期 每28天两期 </span>
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['更新维护']"
                size="medium"
                label="更新维护"
                @click="ct.cks('更新维护')"
              />
            </template>
            <span> 按照每期600钻计算 14天x2</span>
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['万事屋']"
                size="medium"
                label="万事屋"
                @click="ct.cks('万事屋')"
              />
            </template>
            <span> - 每天20钻</span>
          </n-popover>
        </n-space>
      </div>
    </div>
    <div class="nbox2 bg5">
      <n-h3 style="margin-top: 0">氪金收入类</n-h3>
      <div class="nbox2">
        <n-space>
          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <n-checkbox
                :checked="val.zsdata['月卡']"
                size="medium"
                label="月卡"
                @click="ct.cks('月卡')"
              />
            </template>
            <span> - 首日给1500钻 每天给100钻 </span>
          </n-popover>
        </n-space>
      </div>
    </div>
    <div class="nbox2 bg5">
      <n-h3 style="margin-top: 0">日常消耗类</n-h3>
      <div class="nbox2 bg5">
        <n-space>
          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 12px;
                "
              >
                <span>购买绿锤</span>
                <n-select
                  style="width: 150px"
                  :options="val.lvchuiselect"
                  v-model:value="val.sldata.lvchui"
                  @update:value="ct.upselect('购买绿锤', val.sldata.lvchui)"
                ></n-select>
              </div>
            </template>
            <span> - 每周-5000钻 4周 - 20000 </span>
          </n-popover>

          <n-popover trigger="hover" :keep-alive-on-hover="false">
            <template #trigger>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 12px;
                "
              >
                <span>购买体力</span>
                <n-select
                  style="width: 150px"
                  :options="val.tiliselect"
                  v-model:value="val.sldata.tili"
                  @update:value="ct.upselect('购买体力', val.sldata.tili)"
                ></n-select>
              </div>
            </template>
            <span> ~ </span>
          </n-popover>
        </n-space>
      </div>
    </div>
    <div class="nbox2 bg5">
      <n-h3 style="margin-top: 0">排名奖励类</n-h3>
      <div class="nbox2 bg5">
        <n-flex>
          <div
            style="display: flex; flex-direction: column; align-items: center; gap: 12px"
          >
            <span>44竞技场排名</span>
            <n-select
              style="width: 150px"
              :options="val.pvp44select"
              v-model:value="val.sldata.pvp44"
              @update:value="ct.upselect('44', val.sldata.pvp44)"
            ></n-select>
          </div>

          <div
            style="display: flex; flex-direction: column; align-items: center; gap: 12px"
          >
            <span>33竞技场排名</span>
            <n-select
              style="width: 150px"
              :options="val.pvp44select"
              v-model:value="val.sldata.pvp33"
              @update:value="ct.upselect('33', val.sldata.pvp33)"
            ></n-select>
          </div>

          <div
            style="display: flex; flex-direction: column; align-items: center; gap: 12px"
          >
            <span>死斗模式排名</span>
            <n-select
              style="width: 150px"
              :options="val.pvp44select"
              v-model:value="val.sldata.pvpsd"
              @update:value="ct.upselect('死斗', val.sldata.pvpsd)"
            ></n-select>
          </div>

          <div
            style="display: flex; flex-direction: column; align-items: center; gap: 12px"
          >
            <span>公会战排名</span>
            <n-select
              style="width: 150px"
              :options="val.pvpguildselect"
              v-model:value="val.sldata.pvpguild"
              @update:value="ct.upselect('公会战', val.sldata.pvpguild)"
            ></n-select>
          </div>
        </n-flex>
      </div>
    </div>
  </div>
</template>

<script>
export default defineComponent({
  setup() {
    const lang = {
      每日签到: {
        //签到面板28天
        钻石: 1000 + 2700,
      },
      签到邮箱: {
        //（28天）每日100 + 周六日 200
        钻石: (100 * 5 + 200 * 2) * 4,
      },
      公会签到: {
        //28天 600 每周签到150
        钻石: 600,
      },
      每日任务: {
        //韩服每日任务增加到120钻
        钻石: 3360,
      },
      忒提斯: {
        //赛季1个半月 1500钻 28天算1000钻
        钻石: 1500 / 1.5,
      },
      更新维护: {
        钻石: 1200,
      },
      团队远征普通首通: {
        钻石: 500,
      },
      团队远征挑战首通: {
        钻石: 300 * 4,
      },
      首领连战: {
        //28天1600 双周800
        钻石: 1600,
      },
      除草公主: {
        //28天最高840(不稳定)
        钻石: 50 * 28,
      },
      史莱姆: {
        //28天 两次史莱姆 800钻
        钻石: 400 * 2,
      },
      万事屋: {
        //28天 两次史莱姆 800钻
        钻石: 20 * 28,
      },
      月卡: {
        //28天 2800钻 首日1500
        钻石: 2800 + 1500,
      },
      团队远征: {
        钻石: 5040,
      },
      44: {
        //28天重置4次
        1: 3500 * 4,
        2: 3200 * 4,
        3: 2900 * 4,
        前10: 2700 * 4,
        前50: 2600 * 4,
        前100: 2500 * 4,
        大师: 2400 * 4,
        钻石1: 2300 * 4,
        钻石2: 2200 * 4,
        钻石3: 2100 * 4,
        铂金1: 1900 * 4,
        铂金2: 1800 * 4,
        铂金3: 1700 * 4,
        黄金1: 1500 * 4,
        黄金2: 1400 * 4,
        黄金3: 1300 * 4,
        白银1: 1100 * 4,
        白银2: 1000 * 4,
        白银3: 900 * 4,
        青铜1: 700 * 4,
        青铜2: 600 * 4,
        青铜3: 500 * 4,
      },
      33: {
        //28天重置2次
        1: 3500 * 2,
        2: 3200 * 2,
        3: 2900 * 2,
        前10: 2700 * 2,
        前50: 2600 * 2,
        前100: 2500 * 2,
        大师: 2400 * 2,
        钻石1: 2300 * 2,
        钻石2: 2200 * 2,
        钻石3: 2100 * 2,
        铂金1: 1900 * 2,
        铂金2: 1800 * 2,
        铂金3: 1700 * 2,
        黄金1: 1500 * 2,
        黄金2: 1400 * 2,
        黄金3: 1300 * 2,
        白银1: 1100 * 2,
        白银2: 1000 * 2,
        白银3: 900 * 2,
        青铜1: 700 * 2,
        青铜2: 600 * 2,
        青铜3: 500 * 2,
      },
      死斗: {
        //28天重置2次
        1: 2400 * 2,
        2: 2200 * 2,
        3: 2000 * 2,
        前10: 1800 * 2,
        前50: 1700 * 2,
        前100: 1600 * 2,
        大师: 1500 * 2,
        钻石1: 1300 * 2,
        钻石2: 1200 * 2,
        钻石3: 1100 * 2,
        铂金1: 1050 * 2,
        铂金2: 1000 * 2,
        铂金3: 950 * 2,
        黄金1: 900 * 2,
        黄金2: 850 * 2,
        黄金3: 800 * 2,
        白银1: 750 * 2,
        白银2: 700 * 2,
        白银3: 650 * 2,
        青铜1: 600 * 2,
        青铜2: 550 * 2,
        青铜3: 500 * 2,
      },
      公会战: {
        //28天重置2次
        1: 3100 * 2,
        2: 2900 * 2,
        3: 2700 * 2,
        "4到5": 2500 * 2,
        前10: 2300 * 2,
        前20: 2100 * 2,
        前50: 1900 * 2,
        前100: 1800 * 2,
        前150: 1600 * 2,
        前200: 1500 * 2,
        前300: 1400 * 2,
        前400: 1300 * 2,
        前500: 1250 * 2,
        前1000: 1200 * 2,
        前1500: 1150 * 2,
        前2000: 1100 * 2,
        前3000: 1000 * 2,
        排名3000以上: 700 * 2,
      },
      购买绿锤: {
        1: -5000 * 1,
        2: -5000 * 2,
        3: -5000 * 3,
        4: -5000 * 4,
      },
      购买体力: {
        1: -100 * 28,
        2: -200 * 28,
        3: -400 * 28,
        4: -600 * 28,
        6: -1200 * 28,
        8: -2000 * 28,
        10: -3000 * 28,
        15: -5500 * 28,
        20: -8000 * 28,
      },
    };

    let val = reactive({
      int: 0,
      int2: {},
      sldata: {
        pvp44: "请选择你的段位",
      },
      zsdata: {},
      lvchuiselect: [
        {
          value: 1,
          label: `买一个绿锤`,
        },
        {
          value: 2,
          label: `买两个绿锤`,
        },
        {
          value: 3,
          label: `买三个绿锤`,
        },
        {
          value: 4,
          label: `买四个绿锤`,
        },
      ],
      tiliselect: [
        {
          value: 1,
          label: `每日一管`,
        },
        {
          value: 2,
          label: `每日两管`,
        },
        {
          value: 3,
          label: `每日三管`,
        },
        {
          value: 4,
          label: `每日四管`,
        },
        {
          value: 5,
          label: `每日五管`,
        },
      ],
      pvp44select: [
        {
          value: "1",
          label: `榜一`,
        },
        {
          value: "2",
          label: `榜二`,
        },
        {
          value: "3",
          label: `榜三`,
        },
        {
          value: "前10",
          label: `前十`,
        },
        {
          value: "前50",
          label: `前50`,
        },
        {
          value: "前100",
          label: `前100`,
        },
        {
          value: "大师",
          label: `大师`,
        },
        {
          value: "钻石1",
          label: `钻石1`,
        },
        {
          value: "钻石2",
          label: `钻石2`,
        },
        {
          value: "钻石3",
          label: `钻石3`,
        },
        {
          value: "铂金1",
          label: `铂金1`,
        },
        {
          value: "铂金2",
          label: `铂金2`,
        },
        {
          value: "铂金3",
          label: `铂金3`,
        },
        {
          value: "黄金1",
          label: `黄金1`,
        },
        {
          value: "黄金2",
          label: `黄金2`,
        },
        {
          value: "黄金3",
          label: `黄金3`,
        },
        {
          value: "白银1",
          label: `白银1`,
        },
        {
          value: "白银2",
          label: `白银2`,
        },
        {
          value: "白银3",
          label: `白银3`,
        },
        {
          value: "青铜1",
          label: `青铜1`,
        },
        {
          value: "青铜2",
          label: `青铜2`,
        },
        {
          value: "青铜3",
          label: `青铜3`,
        },
      ],
      pvpguildselect: [
        {
          value: "1",
          label: `榜一`,
        },
        {
          value: "2",
          label: `榜二`,
        },
        {
          value: "3",
          label: `榜三`,
        },
        {
          value: "4到5",
          label: `榜四榜五`,
        },
        {
          value: "前10",
          label: `前10`,
        },
        {
          value: "前20",
          label: "前20",
        },
        {
          value: "前50",
          label: "前50",
        },
        {
          value: "前100",
          label: "前100",
        },
        {
          value: "前150",
          label: "前150",
        },
        {
          value: "前200",
          label: "前200",
        },
        {
          value: "前300",
          label: "前300",
        },
        {
          value: "前400",
          label: "前400",
        },
        {
          value: "前500",
          label: "前500",
        },
        {
          value: "前1000",
          label: "前1000",
        },
        {
          value: "前1500",
          label: "前1500",
        },
        {
          value: "前2000",
          label: "前2000",
        },
        {
          value: "排名3000以上",
          label: "排名3000以上",
        },
      ],
    });
    let ct = reactive({});
    ct.cks = (key) => {
      if (val.zsdata[key] != true) {
        val.int += lang[key]["钻石"];
        val.zsdata[key] = true;
      } else {
        val.int -= lang[key]["钻石"];
        val.zsdata[key] = false;
      }
    };
    ct.upselect = (type, data) => {
      if (val.int2[type] == null) {
        val.int2[type] = lang[type][data];
        val.int += val.int2[type];
      } else {
        val.int -= val.int2[type];
        val.int2[type] = lang[type][data];
        val.int += val.int2[type];
      }
    };
    return {
      val,
      ct,
    };
  },
});
</script>
